<template>
	<view class="container">
		<view class="content" v-if="!fixing">
			<view class="gradeContainer y_center">
				<view class="logo">
					<image src="https://mx.acktechnologies.com.cn/uploads/20210709/b6bb59a54081157543d92044b2ac7378.png"
						mode=""></image>
				</view>
				<view class="screenHead">
					<view class="screenItem" @click="toSelect">
						{{user}}
						<view class="icon"></view>
					</view>
				</view>
			</view>
			<view class="swiper" v-if="swiperInfo.length>0">
				<uni-swiper-dot :info="swiperInfo" :dotsStyles="dotsStyles" :current="current" field="image"
					:mode="mode">
					<swiper class="swiper-box" @change="change" circular="true" autoplay="true">
						<swiper-item v-for="(item ,index) in swiperInfo" :key="index">
							<view class="swiper-item">
								<image :src="item.image" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 金刚区 -->
			<view class="grid" v-if="cateList.length>0">
				<view class="grid_item" v-for="(item,index) in cateList" :key="index">
					<navigator class="item" url="../stage/index" hover-class="none" v-if="item.href_to==='apply'">
						<image :src="item.image" mode=""></image>
						<view class="text">
							{{item.name}}
						</view>
					</navigator>
					<navigator class="item" :url="'../stage/list?id='+item.id" hover-class="none"
						v-else-if="item.href_to==='school'">
						<image :src="item.image" mode=""></image>
						<view class="text">
							{{item.name}}
						</view>
					</navigator>
					<navigator class="item" hover-class="none" :url="'../course/list?cate_id=' + item.id" v-else>
						<image :src="item.image" mode=""></image>
						<view class="text">
							{{item.name}}
						</view>
					</navigator>
				</view>
			</view>
			<!-- 文化课 -->
			<view class="model">
				<title :name="recommend[0].name" @jumpMoreHadle='moreHadle(recommend[0])'></title>
				<view class="content">
					<scroll-view scroll-x="true" class="list_container">
						<view class="y_center">
							<view :class="['item',{'active':culture_grade_phase_active===index}]"
								v-for="(item,index) in recommend[0].list" @click="gradeHadle('culture',index)"
								:key='index'>
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-x="true" v-if="recommend[0]&&recommend[0].list&&recommend[0].list[culture_grade_phase_active].list.length>0"
						class="list_pic_container">
						<view class="line" v-if="recommend[0].href_to==='grade'">
							<navigator class="item" :url="'../course/detail?goods_id='+item.goods_id" hover-class="none"
								v-for="(item,index) in recommend[0].list[culture_grade_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
						<view class="line" v-else>
							<navigator class="item" :url="'../stage/class?id='+item.goods_id" hover-class="none" 
								v-for="(item,index) in recommend[0].list[culture_grade_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 幼儿园 -->
			<view class="model" v-if="recommend[1]&&recommend[1].list&&recommend[1].list.length>0">
				<title :name="recommend[1].name" @jumpMoreHadle='moreHadle(recommend[1])'></title>
				<scroll-view scroll-x="true" class="list_container">
					<view class="y_center">
						<view :class="['item',{'active':kid_phase_active===index}]"
							v-for="(item,index) in recommend[1].list" @click="gradeHadle('kid',index)" :key='index'>
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="content">
					<scroll-view scroll-x="true" class="list_pic_container">
						<view class="line" v-if="recommend[1].href_to==='grade'">
							<navigator class="item" :url="'../course/detail?goods_id='+item.shop_id"
								 hover-class="none"
								v-for="(item,index) in recommend[1].list[kid_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
						<view class="line" v-else>
							<navigator class="item" :url="'../stage/class?id='+item.shop_id"  hover-class="none"
								v-for="(item,index) in recommend[1].list[kid_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="model" v-if="recommend[2]&&recommend[2].list&&recommend[2].list.length>0">
				<title :name="recommend[2].name" @jumpMoreHadle='moreHadle(recommend[2])'></title>
				<view class="content">
					<scroll-view scroll-x="true" class="list_container">
						<view class="y_center">
							<view :class="['item',{'active':grade_phase_active===index}]"
								v-for="(item,index) in recommend[2].list" @click="gradeHadle('trusteeship',index)"
								:key='index'>
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-x="true" v-if="recommend[2].list[grade_phase_active].list.length>0"
						class="list_pic_container">
						<view class="line" v-if="recommend[2].href_to==='grade'">
							<navigator class="item" :url="'../course/detail?goods_id='+item.shop_id"
								 hover-class="none"
								v-for="(item,index) in recommend[2].list[grade_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
						<view class="line" v-else>
							<navigator class="item" :url="'../stage/class?id='+item.shop_id" hover-class="none"
								v-for="(item,index) in recommend[2].list[grade_phase_active].list" :key='index'>
								<view class="pic">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="desc">
									{{item.name}}
								</view>
							</navigator>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="school" v-if="school.length>0">
				<title name="校园风采" @jumpMoreHadle='jigouMoreHadle()'></title>
				<view class="school_list">
					<!-- :style="{backgroundImage:'url(' + item.image +')'}" -->
					<navigator class="item" 
						:url="'../stage/class?id='+item.id" v-for="(item,index) in school" :key='index'>
						{{item.name}}
					</navigator>
				</view>
				<view class="view_more" @click="jigouMoreHadle">
					查看全部校区
				</view>
			</view>
		</view>
		<view class="fixContainer" v-if="fixing">
			<image src="https://mx.acktechnologies.com.cn/uploads/20210709/b6bb59a54081157543d92044b2ac7378.png"
				mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: "",
				swiperInfo: [],
				current: 0,
				mode: 'round',
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 15,
					backgroundColor: 'rgba(255, 255, 255, 0.58)',
					border: 'rgba(255, 255, 255, 0.58)',
					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
					selectedBorder: 'rgba(255, 255, 255, 1)',
				},
				cateList: [],
				session_key: '',
				openid: '',
				fixing: true,
				phase: '',
				grade_phase_active: 0, //托管班当前选中的年级下标
				culture_grade_phase_active: 0, //文化课当前选中的年级下标
				kid_phase_active: 0, //幼儿园当前选中的年级下标
				recommend: '',
				school: [],
				user: '',
			}
		},
		onShow(){
		},
		created() {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			this.getData();
			this.getRecommendGoods();
			uni.getStorage({
				key: 'phase',
				success: (res) => {
					this.user = res.data;
					console.log(this.user)
					if (!this.user) {
						uni.redirectTo({
							url: './select_grade'
						});
					}
				},
				fail() {
					uni.redirectTo({
						url: './select_grade'
					});
				}
			})
			this.getwgs84();
		},
		methods: {
			getwgs84() {
				uni.getStorage({
					key: 'user_info',
					success: (res) => {
						console.log(res)
						this.token = res.data.token;
						if (this.token) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									let longitude = res.longitude;
									let latitude = res.latitude;
									uni.request({
										url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/uploadLocation',
										data: {
											"token": this.token,
											"longitude": longitude,
											"latitude": latitude
										},
										method: 'GET',
										success: res => {
											console.log(res);
										}
									});
								},
							});
						}
					}
				});
			},
			gradeHadle(type, index) {
				console.log(type,index)
				if (type === 'culture') {
					this.culture_grade_phase_active = index;
					console.log(this.recommend[0].list[this.culture_grade_phase_active].list)
				} else if (type === 'kid') {
					this.kid_phase_active = index;
					console.log(this.recommend[1].list[this.kid_phase_active].list)
				} else {
					this.grade_phase_active = index;
					console.log(this.recommend[2].list[grade_phase_active].list)
	
				}
			},
			toSelect() {
				uni.redirectTo({
					url: './select_grade'
				});
			},
			moreHadle(obj) {
				console.log(obj)
				if(obj.href_to==='grade'){
					uni.redirectTo({
						url: '../course/list?cate_id=' + obj.cate_id
					});
				}else{
					uni.redirectTo({
						url: '../stage/list?id=' + obj.cate_id
					});
				}
			},
			jigouMoreHadle() {
				uni.switchTab({
					url: '../institution/list'
				});
			},
			getRecommendGoods() {
				this.$request('/api/wxapp/v2/index/getRecommendGoods').then(res => {
					console.log(res)
					if (res.code === 1) {
						this.recommend = res.data;
					}
				}).catch(res => {
					if (res.code === 401) {
						this.init();
					}
				})
			},
			getData() {
				//this.$request('/api/wxapp/v2/index/index').then(res => {
				this.$request('/api/wxapp/v2/index/index2').then(res => {
					if (res.code === 1) {
						this.swiperInfo = res.data.banner;
						this.cateList = res.data.category;
						this.phase = res.data.phase;
						//this.recommend = res.data.recommend;
						this.school = res.data.school;
						this.fixing = false;
						uni.hideLoading();
					}
				}).catch(res => {
					if (res.code === 401) {
						this.init();
					}
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
		},
		filters:{
			formatTxt(val){
				if(val.length>7){
					return val.substring(0,7)+'...';
				}else{
					return val;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		padding: 0 40rpx 60rpx 40rpx;
		font-size: 14px;
		line-height: 24px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		box-sizing: border-box;
	}
	.line{
		display: flex;
	}
	.fixContainer {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 80px;
			height: 80px;
		}
	}

	.swiper {
		width: 670rpx;
		height: 280rpx;
		background: #D8D8D8;
		border-radius: 12px;
		margin: 0px auto 10px auto;

		swiper {
			width: 670rpx;
			height: 280rpx;
		}
	}

	.swiper-item image {
		width: 670rpx;
		height: 280rpx;
		border-radius: 12px;
	}

	.grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 17px;

		.item {
			width: 135rpx;
			//margin-right: 40rpx;
			margin-bottom: 28rpx;

			image {
				display: block;
				width: 102rpx;
				height: 102rpx;
				margin: 0 auto;
			}

			.text {
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				line-height: 15px;
				text-align: center;
				margin-top: 10rpx;
			}
		}

		.item:nth-child(5),
		.item:nth-child(10) {
			margin-right: 0;
		}
	}

	.model {
		margin-top: 36px;
	}

	.list_container {
		margin-top: 24px;

		.item {
			margin-right: 20rpx;
			font-size: 30rpx;
			color: #666666;
			line-height: 30rpx;
			white-space: nowrap;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.active {
			font-size: 34rpx;
			color: #333333;
			line-height: 34rpx;
		}
	}

	.list_pic_container {
		margin-top: 40rpx;
		.item {
			// width: 124px;
			// height: 86px;
			border-radius: 16rpx;
			background-size: cover;
			font-size: 30rpx;
			color: #575656;
			font-weight: 700;
			padding: 20rpx 18rpx;
			margin-right: 20rpx;
			.pic{
				width: 248rpx;
				height: 172rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.desc{
				width: 210rpx;
				line-height: 46rpx;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #666666;
				margin: 20rpx auto 0 auto;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}

	.school {
		margin-top: 80rpx;
		margin-bottom: 30rpx;

		.school_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 40rpx;

			// .cover {
			// 	width: 325rpx;
			// 	height: 120rpx;
			// 	border-radius: 8px;
			// 	padding-top: 10px;
			// 	padding-left: 10px;
			// 	box-sizing: border-box;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 99;
			// }
		}

		.item {
			width: 210rpx;
			background: #F2F7F7;
			border-radius: 6rpx;
			padding: 18rpx 12rpx 20rpx 16rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #7BA59F;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: justify;
			margin-bottom: 20rpx;
		}
		.item:nth-child(2),.item:nth-child(5),.item:nth-child(8),.item:nth-child(11){
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		// .item:nth-child(odd) {
		// 	margin-right: 20rpx;
		// }

		// .item:nth-child(1) .cover {
		// 	background-image: linear-gradient(220deg, rgba(121, 195, 255, 0) 0%, rgba($color: #79C3FF, $alpha: 0.6) 100%);
		// }

		// .item:nth-child(2) .cover {
		// 	background-image: linear-gradient(221deg, rgba(121, 195, 255, 0) 0%, rgba($color: #A597F9, $alpha: 0.6) 100%);
		// }

		// .item:nth-child(3) .cover {
		// 	background-image: linear-gradient(222deg, rgba(121, 195, 255, 0) 0%, rgba($color: #66DABF, $alpha: 0.6) 100%);
		// }

		// .item:nth-child(4) .cover {
		// 	background-image: linear-gradient(220deg, rgba(121, 195, 255, 0) 0%, rgba($color: #718AF8, $alpha: 0.6) 100%);
		// }

		.distance {
			font-size: 26rpx;
		}

	}

	.screenHead {
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 5px 0;

		.screenItem {
			margin-right: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: baseline;
			font-size: 30rpx;
			color: #666666;
			line-height: 30rpx;

			.icon {
				width: 0;
				height: 0;
				border-bottom: 12rpx solid #666666;
				border-left: 12rpx solid transparent;
				margin-left: 6rpx;
			}
		}
	}

	.gradeContainer {

		.logo,
		.logo image {
			width: 118rpx;
			height: 110rpx;
		}
	}
	.view_more{
		width: 670rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 1px solid #EEEEEE;
		font-size: 26rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #70B9AA;
		text-align: center;
		margin-top: 20rpx;
	}
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
</style>
